<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>Uppy</title>
    <!-- 1. Add CSS to `<head>` -->
    <link href="https://transloadit.edgly.net/releases/uppy/v1.5.0/uppy.min.css" rel="stylesheet">
</head>
<body>
<div id="uppy-dashboard-area"></div>
<!-- 2. Add JS before the closing `</body>` -->
<script src="https://transloadit.edgly.net/releases/uppy/v1.5.0/uppy.min.js"></script>
<script>

    var uppy = Uppy.Core({
        autoProceed: false,
        allowMultipleUploads: true, // 上传完成之后，是否可继续添加文件上传
        restrictions: {
            maxFileSize: 1024 * 1024 * 1024 * 4, // 以字节为单位
            maxNumberOfFiles: 100,
            minNumberOfFiles: 1,
            allowedFileTypes: ['image/*', 'video/*'] // mime类型(image/png)或者文件后缀名(.jpg)
        }
    })
        .use(Uppy.Dashboard, {
            id: 'Dashboard',
            metaFields: [
                { id: 'name', name: 'Name', placeholder: 'file name' }
            ],
            target: '#uppy-dashboard-area',
            note: 'image and video only',
            inline: true,
            showLinkToFileUploadResult: true,
            showProgressDetails: true,
            hideUploadButton: false,
            hideRetryButton: false,
            hidePauseResumeButton: false,
            hideCancelButton: false,
            hideProgressAfterFinish: false,
            closeModalOnClickOutside: false,
            closeAfterFinish: false,
            disableStatusBar: false,
            disableInformer: false,
            disableThumbnailGenerator: false,
            disablePageScrollWhenModalOpen: true,
            animateOpenClose: true,
            proudlyDisplayPoweredByUppy: true,
            onRequestCloseModal: () => this.closeModal(),
            showSelectedFiles: true,
            locale: zhcn,
            browserBackButtonClose: false
        })
        .use(Uppy.Tus, {
            endpoint: '/FileUpload/Upload'
        })


    uppy.on('file-added', (file) => {
        uppy.setFileMeta(file)
    })
    uppy.on('file-removed', (file) => {
        console.log('Removed file', file)
    })
    uppy.on('upload-success', (file, response) => {

    })
    uppy.on('complete', (result) => {
        console.log('Upload complete! We’ve uploaded these files:', result.successful)
    })
</script>
</body>
</html>